<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			//读取csv数据，第一个参数是文件地址，第二个参数是一个
 			//function(error,data)函数，其中data里保存的是读取到的数据
			d3.csv("Data/fruit.csv",function(error,data){
				if(error){
					return console.error(error);
				}
					console.log(data);
					
					//获取数据
					var fruit=[];
					var sales=[];
					for (i=0;i<data.length;i++){
						//获取数据，将字符串转换为数字,填充入变量中
						fruit.push(data[i].fruit);
						sales.push(parseFloat(data[i].sales));
					}
					//制作柱形图
					var svg=d3.select("body").append("svg").attr("height",600).attr("width",600);
					var xScale=d3.scaleBand()
								 .domain(fruit)
								 .range([0,250]);
					var yScale=d3.scaleLinear()
								 .domain([0,d3.max(sales)])
								 .range([0,400]);
					svg.selectAll("rect")
						.data(sales)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return 30+50*i;})
						.attr("y",function(d,i){return 550-yScale(d);})
						.attr("height",function(d){return yScale(d);})
						.attr("width",40)
						.attr("fill","yellow");
						
					svg.selectAll("text")
						.data(sales)
						.enter()
						.append("text")
						.attr("x",function(d,i){return 30+50*i;})
						.attr("y",function(d,i){return 550-yScale(d);})
						.attr("dx","8px")
						.attr("font-size","16px")
						.text(function(d){return d;});
						
					//添加坐标轴
					var xAxis=d3.axisBottom(xScale);
					yScale.range([400,0]);
					var yAxis=d3.axisLeft(yScale);
					svg.append("g")
					   .attr("transform","translate(30,550)")
					   .call(xAxis);
					svg.append("g")
					   .attr("transform","translate(30,150)")
					   .call(yAxis);
			});	
			
			
		
			//读取json数据
			d3.json("Data/student.json",function(error,data){
				if (error)
					return console.error(error);
				console.log(data);
			});
			

		</script>

	</body>
</html>
